import React, {useState, useEffect} from 'react';
import {AtIcon} from "taro-ui";
import {View, Text, Picker} from '@tarojs/components'
import './index.scss'

const DistPicker: React.FC<{ addressData?: any; address: string; onChange: any }> = ({
                                                                                       addressData,
                                                                                       address,
                                                                                       join,
                                                                                       onChange
                                                                                     }) => {
  const [rangeData, setRangeData] = useState([[], [], []])
  const [rangeKey, setRangeKey] = useState([0, 0, 0])
  const [formData, setFormData] = useState({
    province: "",
    city: "",
    country: ""
  })

  const handlerSyncFunc = async () => {
    if (address) {
      handleCityDataStr(address);
    }
    handleCityData(rangeKey);
  }

  useEffect(() => {
    handlerSyncFunc()
  }, [address])

  const handleCityDataStr = key => {
    const add = key.split(",")
    const obj = {
      province: add[0],
      city: add[1],
      country: add[2]
    }
    setFormData(obj)
  }
  const handleCityData = key => {
    // 处理数据。
    const provinceList = []; // 省
    const cityList = []; // 市
    const areaList = []; // 区
    for (let i = 0; i < addressData.length; i++) {
      // 获取省
      const province = addressData[i];
      provinceList.push(province.name);
    }
    if (addressData[key[0]].areaList && addressData[key[0]].areaList.length > 0) {
      for (let i = 0; i < addressData[key[0]].areaList.length; i++) {
        // 获取对应省下面的市
        const city = addressData[key[0]].areaList[i];
        cityList.push(city.name);
      }
    }
    for (
      let i = 0;
      i < addressData[key[0]].areaList[key[1]].areaList.length;
      i++
    ) {
      // 获取市下面对应区
      const country = addressData[key[0]].areaList[key[1]].areaList[i].name;
      areaList.push(country);
    }
    // }
    const newRange = [];
    newRange.push(provinceList);
    newRange.push(cityList);
    newRange.push(areaList);
    setRangeData(newRange)
    setRangeKey(key)
  }
  const handChange = e => {
    getAddressName(e.detail.value);
  }
  const getAddressName = value => {
    // 这里是转化用户选择的地址数据
    const obj = {
      province: "",
      city: "",
      country: ""
    };

    if (addressData[value[0]]) {
      obj.province = addressData[value[0]].name; // 省名称
      if (
        addressData[value[0]].areaList &&
        addressData[value[0]].areaList[value[1]]
      ) {
        obj.city = addressData[value[0]].areaList[value[1]].name;
        if (
          addressData[value[0]].areaList[value[1]].areaList &&
          addressData[value[0]].areaList[value[1]].areaList[value[2]]
        ) {
          obj.country =
            addressData[value[0]].areaList[value[1]].areaList[
              value[2]
              ].name;
        }
      }
    }
    const data = {
      addary: value,
      address: obj.province + ',' + obj.city + "," + obj.country
    }
    onChange(data)
    setFormData(obj)
  };
  const onColumnChange = e => {
    const changeColumn = e.detail;
    const {column, value} = changeColumn;

    switch (column) { // 根据改变不同的列，来显示不同的数据
      case 0:
        handleCityData([value, 0, 0]);
        break;
      case 1:
        handleCityData([rangeKey[0], value, 0]);

        break;
      case 2:
        handleCityData([rangeKey[0], rangeKey[1], value]);
        break;
    }
  };
  return (
    <View className='DistPicker-box'>
      <Picker
        mode='multiSelector' // 多列选择
        onChange={handChange} // change事件
        onColumnChange={onColumnChange} // 某列改变的事件
        range={rangeData} //需要展示的数据
        value={rangeKey} // 选择的下标
      >
        <View className='add-flex'>
          <View className='label'>所在地区</View>
          <View className='addcheck'>
            {formData.province && (
              <Text>
                {formData.province}
                {formData.city}
                {formData.country}
              </Text>
            )}
            {!formData.province && (
              <Text className='text'>选择省市区</Text>
            )}
            <AtIcon value='chevron-right' size='14' color='#888888'></AtIcon>
          </View>
        </View>
      </Picker>
    </View>
  )
}
DistPicker.defaultProps = {
  data: []
}
export default DistPicker
